<!--
 * @Description: 
 * @Author: zhuying
 * @Date: 2024-11-05 15:28:06
 * @LastEditors: rendc
 * @LastEditTime: 2024-11-06 11:01:53
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css.css">
  <title>网上书城</title>
 
</head>

<body>
  <header class="header">
    <img src="./img/logo.png" width="190" height="50" alt="图片丢失。。。"/>
    <!-- <div>网上书城 bookstore.com</div> -->
    <div class="nav-links">
      <a href="#">🛒购物车</a>
      <a href="#">帮助中心</a>
      <a href="#">我的账户</a>
      <a href="#">新用户注册</a>
    </div>
  </header>
  <nav>
    <div class="category-links">
      <a href="#">文学</a>
      <a href="#">生活</a>
      <a href="#">计算机</a>
      <a href="#">外语</a>
      <a href="#">励志</a>
      <a href="#">社科</a>
      <a href="#">全部</a>
      <a href="#">少儿</a>
      <a href="#">艺术</a>
      <a href="#">科技</a>
      <a href="#">考试</a>
      <a href="#">生活百科</a>
      <a href="#">全部目录商品</a>
    </div>
  </nav>
  <div class="search-bar">
    <input type="text" placeholder="Search">
    <button>搜索</button>
  </div>
  <table>
      <main>
          <h2>首页 &gt; 旅游 &gt; 图书列表</h2>
          <h3>商品目录</h3>
        <hr>
          <h3>计算机类<span>共 100 种商品</span></h3>
        <hr>
          <div id="ust"><b>PRODUCT UST</b></div>
    <div class="gallery">
        <div class="book-item">
            <img src="img\fish.jpg" alt="tupian">
            <div class="book-info">
                <p>书名: 书名1</p>
                <p>作者: 作者1</p>
            </div>
        </div>
        <div class="book-item">
            <img src="img/ngcn.jpg" alt="tupian">
            <div class="book-info">
                <p>书名: 书名2</p>
                <p>作者: 作者2</p>
            </div>
        </div>
        <div class="book-item">
            <img src="./img/oneplant.jpg" alt="tupian">
            <div class="book-info">
                <p>书名: 书名3</p>
                <p>作者: 作者3</p>
            </div>
        </div>
        <div class="book-item">
            <img src="./img/photog.jpg" alt="tupian">
            <div class="book-info">
                <p>书名: 书名4</p>
                <p>作者: 作者4</p>
            </div>
        </div>
        <div class="book-item">
            <img src="./img/subwayinshanghai.jpg" alt="tupian">
            <div class="book-info">
                <p>书名: 书名5</p>
                <p>作者: 作者5</p>
            </div>
        </div>
        <div class="book-item">
            <img src="./img/think.jpg" alt="tupian">
            <div class="book-info">
                <p>书名: 书名6</p>
                <p>作者: 作者6</p>
            </div>
        </div>
        <div class="book-item">
            <img src="./img/travelbook.jpg" alt="tupian">
            <div class="book-info">
                <p>书名: 书名7</p>
                <p>作者: 作者7</p>
            </div>
        </div>
        <div class="book-item">
            <img src="./img/tripcn.jpg" alt="tupian">
            <div class="book-info">
                <p>书名: 书名8</p>
                <p>作者: 作者8</p>
            </div>
        </div>
    </div>

    </main>
  </table>
<div><span>上一页</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>下一页</span></div>
  </main>
  <footer>
    <img src="./img/logo.png" width="190" height="50" alt="图片丢失。。。"/>

    <p>网上书城 bookstere.com</p>
    <p>copyright 2008 ©BookStore All Rights RESERVED</p>
  </footer>
</body>

</html>